<style>
    /* 整体表单样式 */
    form {
        width: 600px;
        margin: 0 auto;
        padding: 20px;
        border: 1px solid #ccc;
        border-radius: 5px;
        background-color: #fff;
    }

    label {
        display: block;
        margin-bottom: 5px;
        font-weight: bold;
        color: #333;
    }

    input,
    select {
        width: 100%;
        padding: 8px;
        margin-bottom: 15px;
        border: 1px solid #ccc;
        border-radius: 3px;
    }

    input[type="text"]:focus,
    select:focus {
        border-color: #007bff;
        outline: none;
    }

    /* 选项部分样式 */
    .option-container {
        margin-bottom: 15px;
    }

    .option {
        display: flex;
        align-items: center;
        margin-bottom: 5px;
    }

    .option-label {
        width: 30px;
        margin-right: 10px;
        text-align: center;
    }

    .option-input {
        flex: 1;
        margin-right: 10px;
    }

    .score-input {
        width: 80px;
    }

    .delete-option {
        margin-left: 10px;
        background: none;
        border: none;
        color: #f44336;
        cursor: pointer;
    }

    .add-option {
        display: block;
        text-align: center;
        margin-top: 10px;
        color: #007bff;
        cursor: pointer;
    }

    /* 错误提示样式 */
    .error {
        color: #f44336;
        font-size: 14px;
        margin-top: -10px;
        margin-bottom: 15px;
    }

    /* 面包屑导航样式 */
    .breadcrumbs {
        background-color: #f5f5f5;
        padding: 10px;
        margin-bottom: 20px;
    }

    .breadcrumb {
        margin: 0;
        padding: 0;
        list-style: none;
        display: flex;
        align-items: center;
    }

    .breadcrumb li {
        margin-right: 10px;
    }

    .breadcrumb li a {
        text-decoration: none;
        color: #333;
    }

    .breadcrumb li.active {
        color: #007bff;
        font-weight: bold;
    }
</style>
</head>

<body>
<div class="breadcrumbs" id="breadcrumbs">
    <ul class="breadcrumb">
        <li>
            <i class="home-icon fa fa-home"></i>
            <a href="#">问卷</a>
        </li>
        <li>
            <a href="#">问卷管理</a>
        </li>
        <li class="active">添加问卷</li>
    </ul>
</div>

<div class="content">
    <form id="questionForm" action="{url:/vote/question_add_act}" method="post">
        <div class="form-group">
            <label for="questionTitle">* 题目：</label>
            <input type="text" id="questionTitle" placeholder="请填写题目" required>
        </div>
        <div class="form-group">
            <label for="questionType">* 题目类型：</label>
            <select id="questionType" name="questionType" required>
                <option value="1">单选题</option>
                <option value="2">多选题</option>
                <!-- 可按需添加更多题目类型 -->
            </select>
        </div>
        <div class="form-group">
            <label>* 选项：</label>
            <div class="option-container">
                <div class="option">
                    <span class="option-label">A</span>
                    <input name="option[]" type="text" class="option-input" placeholder="请填写选项内容" required>
                    <input name="score[]" type="number" class="score-input" placeholder="得分" required>
                    <button class="delete-option" type="button">删除</button>
                </div>
                <div class="option">
                    <span class="option-label">B</span>
                    <input name="option[]" type="text" class="option-input" placeholder="请填写选项内容" required>
                    <input name="score[]" type="number" class="score-input" placeholder="得分" required>
                    <button class="delete-option" type="button">删除</button>
                </div>
                <div class="option">
                    <span class="option-label">C</span>
                    <input name="option[]" type="text" class="option-input" placeholder="请填写选项内容" required>
                    <input name="score[]" type="number" class="score-input" placeholder="得分" required>
                    <button class="delete-option" type="button">删除</button>
                </div>
                <div class="option">
                    <span class="option-label">D</span>
                    <input name="option[]" type="text" class="option-input" placeholder="请填写选项内容" required>
                    <input name="score[]" type="number" class="score-input" placeholder="得分" required>
                    <button class="delete-option" type="button">删除</button>
                </div>
            </div>
            <span class="add-option" onclick="addOption()">+ 添加选项</span>
            <span class="error" id="optionError">选项内容和得分不可为空！</span>
        </div>
        <div class="form-group">
            <label for="questionNumber">* 题目编号：</label>
            <input type="text" id="questionNumber" placeholder="请填写题目编号" required>
        </div>
        <div class="form-group">
            <label for="isRequired">* 是否必答：</label>
            <select id="isRequired" required name="isRequired">
                <option value="">请选择是否必答</option>
                <option value="1">是</option>
                <option value="2">否</option>
            </select>
        </div>
        <div class="form-group">
            <label for="pageNumber">归属页码：</label>
            <input type="text" id="pageNumber" placeholder="请填写归属页码">
        </div>
        <input type="submit" value="保存" class="btn btn-primary">
    </form>
    <script>
        function addOption() {
            const optionContainer = document.querySelector('.option-container');
            const optionDiv = document.createElement('div');
            optionDiv.classList.add('option');
            const alphabet = String.fromCharCode(65 + optionContainer.querySelectorAll('.option').length);
            optionDiv.innerHTML = `
                    <span class="option-label">${alphabet}</span>
                    <input name="option[]" type="text" class="option-input" placeholder="请填写选项内容" required>
                    <input name="score[]" type="number" class="score-input" placeholder="得分" required>
                    <button class="delete-option" type="button">删除</button>
                `;
            optionContainer.appendChild(optionDiv);
            document.getElementById('optionError').style.display = 'none';
            updateOptionLabels();
            bindDeleteEvents();
        }

        function updateOptionLabels() {
            const optionContainer = document.querySelector('.option-container');
            const options = optionContainer.querySelectorAll('.option');
            options.forEach((option, index) => {
                const label = option.querySelector('.option-label');
                const alphabet = String.fromCharCode(65 + index);
                label.textContent = alphabet;
            });
        }

        function bindDeleteEvents() {
            const deleteButtons = document.querySelectorAll('.delete-option');
            deleteButtons.forEach(button => {
                button.addEventListener('click', function () {
                    this.parentNode.remove();
                    updateOptionLabels();
                });
            });
        }

        document.addEventListener('DOMContentLoaded', function () {
            bindDeleteEvents();
        });

        document.getElementById('questionForm').addEventListener('submit', function (e) {
            const options = document.querySelectorAll('.option-input');
            const scores = document.querySelectorAll('.score-input');
            let hasEmptyOption = false;
            for (let i = 0; i < options.length; i++) {
                if (options[i].value.trim() === '' || scores[i].value.trim() === '') {
                    hasEmptyOption = true;
                    break;
                }
            }
            if (hasEmptyOption) {
                e.preventDefault();
                document.getElementById('optionError').style.display = 'block';
            }
        });
    </script>
</div>
